<template>
	<view class="pb120">
		
		<u-navbar title="详情" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		<view class="home">
			
			<view class="title">校车时刻表</view>
			<!-- <view class="u-flex u-row-between">
				
				<view>
					<u-icon name="eye-fill" size="35" color="#2BC3C8" label="30 浏览" labelSize="24" class="u-m-r-30">
					</u-icon>
					<u-icon :name="showClick?'thumb-up-fill':'thumb-up'" size="32"
						:color="showClick?'#FF0000':'#2BC3C8' " label="30 点赞" labelSize="24" class="u-m-r-30"
						@click="click"></u-icon>
					<u-icon :name="showHeart ? 'heart-fill':'heart'" :color="showHeart?'#FF0000':'#2BC3C8'" label="收藏"
						labelSize="24" size="32" @click="heart"></u-icon>
				</view>
			</view> -->
			<view class="u-m-t-30">
				<div v-for="(paragraph, index) in getParagraphs(detail.content)" :key="index" class="background-container">
				          <u-parse :html="paragraph" :style="{ textAlign: 'center', fontSize: '16px'}"></u-parse>
						  </div>
			
			
				<image src=""></image>
			</view>
			
		</view>
		<u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top" :icon="iconTop"
		 :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips">
		</u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				modeTop: 'circle',
				bottomTop: 200,
				rightTop: 40,
				top: 600,
				iconTop: 'arrow-up',
				iconStyleTop: {
					color: '#ffffff',
					fontSize: '30rpx'
				},
				customStyle: {
					backgroundColor: '#39CCCC',
					color: '#ffffff'
				},
				tips: '顶部',
		
				background: {
					'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
				},
				
				detail: {
					content:
				 `
				 <div>
				<image src="/static/bustime.jpg"></image>
			
			
				</div>
					`},
			
				showHeart: false,
				showClick: false,
				comment: ''
			}
		},
		onLoad() {

		},
	
	computed: {
	  getParagraphs() {
	    return content => content.split(/<\/?div>/).filter(p => p.trim() !== '');
	  }
	},
	
		
		methods: {
			//收藏
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			      
			heart() {
				this.showHeart = !this.showHeart},
			
				
			click() {
				this.showClick = !this.showClick
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 38rpx;
		font-weight: 700;
		padding: 20rpx 0;
	}
	.background-container {
	    background-color: #ffffff; /* 设置所需的背景颜色 */
	    padding: 20px; /* 根据需要进行调整的内边距 */
	    border-radius: 10px; /* 添加圆角 */
	    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
	  }

	.comment {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1rpx solid #ededed;

		.input {
			background-color: #f7f7f7;
			padding: 20rpx 15rpx;
			font-size: 26rpx;
			border-radius: 12rpx;
			width: 480rpx;
		}

		.box {
			display: flex;
			padding: 15rpx 30rpx;
		}
	}

	.pb120 {
		padding-bottom: 120rpx;
	}
	
	.wrap{
		display: flex;
		flex-wrap: wrap;
		padding-left: 12rpx;
		
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 0 0 30%;
			text-align: center;
			border: 1rpx solid #ededed;
			height: 100rpx;
			width: 100rpx;
			margin: 10rpx;
		}
	}
</style>
